<template>
  <div class="Home">
    <el-row>
      <el-col :span="24"><p class="dataStatistics">数据统计</p></el-col>
    </el-row>
    <el-row :gutter="40">
      <el-col class="left" :span="8">
        <p class="data">平台总商家数量和用户数量</p>
        <div class="numberOfUsers">
          <span class="button user">总用户量</span>
          <span class="number">9311119</span>
        </div>
        <div class="merchantVolume">
          <span class="button Merchant">总商户量</span>
          <span class="number">5678</span>
        </div>
      </el-col>
      <el-col :span="16" class="right">
        <p class="data">本月新增商家跟新增用户的数据情况</p>
        <div id="main"></div>
      </el-col>
    </el-row>
    <el-row class="time">
      <el-col :span="3">
        <div>筛选：&nbsp;&nbsp;起始时间</div>
      </el-col>
      <el-col :span="4">
        <div class="times">2021年10月1日</div>
      </el-col>
      <el-col :span="2">
        <div class="overTime">结束时间</div>
      </el-col>
      <el-col :span="4"> <div class="times">2021年10月1日</div></el-col>
    </el-row>
    <footer>
      <ul>
        <li>
          <div class="num">2582</div>
          <div class="name">新增用户量</div>
        </li>
        <li>
          <div class="num">2582</div>
          <div class="name">新增用户量</div>
        </li>
        <li>
          <div class="num">2582</div>
          <div class="name">新增用户量</div>
        </li>
        <li>
          <div class="num">2582</div>
          <div class="name">新增用户量</div>
        </li>
        <li>
          <div class="num">2582</div>
          <div class="name">新增用户量</div>
        </li>
      </ul>
    </footer>
  </div>
</template>
<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);
export default {
  name: "Home",
  data() {
    return {};
  },
  mounted() {
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      color: ["#4d8afa", "#f3bb4b"],
      title: {
        text: "数据对比",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["新增商家", "新增用户"],
        right: 0,
        icon: "circle",
        textStyle: {
          color: "#b8b8b8",
        },
      },
      grid: {
        left: "0%",
        right: "0%",
        bottom: "0%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          colorBy: "#0094ff",
          name: "新增商家",
          type: "line",
          smooth: true,
          showSymbol: false,
          //   symbol: "arrow",
          symbolSize: 2,
          itemStyle: {
            emphasis: {
              color: "#fff",
              borderColor: "#4d87ef",
              borderWidth: 14,
            },
          },
          data: [
            120, 132, 101, 134, 90, 400, 210, 120, 132, 101, 134, 90, 230, 210,
          ],
          lineStyle: {
            width: 4,
          },
        },
        {
          name: "新增用户",
          smooth: true,
          type: "line",
          //   symbol: "circle",
          symbolSize: 2,
          itemStyle: {
            emphasis: {
              color: "#fff",
              borderColor: "#fabb3f",
              borderWidth: 14,
            },
          },
          showSymbol: false,
          data: [
            220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330,
            310,
          ],
          lineStyle: {
            width: 4,
          },
        },
      ],
    };
    option && myChart.setOption(option);
  },
  methods: {},
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.Home {
  width: 100%;
  height: 100%;
  .numberOfUsers,
  .merchantVolume {
    position: relative;
    width: 100%;
    height: 340px;
    background-color: #fff;
    padding: 24px 20px;
  }
  .numberOfUsers {
    margin-bottom: 20px;
  }
  #main {
    padding: 20px;
    height: 700px;
    background-color: #fff;
    width: 100%;
  }
  .left,
  .right {
    flex-wrap: wrap;
  }
  .button {
    padding: 8px 10px;
    color: #fff;
    border-radius: 8px;
  }
  .user {
    background-color: #f4b72c;
  }
  .Merchant {
    background-color: #4e87f6;
  }
  .number {
    position: absolute;
    bottom: 10px;
    left: 20px;
    display: block;
    width: 100%;
    font-size: 50px;
  }
  .time {
    margin: 30px 0;
    display: flex;
    align-items: center;
  }
  .times {
    width: 100%;
    border-radius: 20px;
    background-color: #fff;
    text-align: center;
    padding: 2px 0;
    border: 1px solid #666;
  }
  .overTime {
    width: 100%;
    text-align: center;
  }
  footer {
    width: 100%;
    ul {
      display: flex;
      justify-content: space-between;
      width: 100%;
      li {
        height: 150px;
        background-color: #fff;
        width: 18%;
        border-radius: 20px;
        padding: 60px 20px 0;
        color: #fff;
        .num {
          font-size: 30px;
          margin-bottom: 10px;
        }
        &:nth-child(1) {
          background-image: linear-gradient(to right, #eea3a5, #f4608d);
        }
        &:nth-child(2) {
          background-image: linear-gradient(to right, #70cdf6, #13aefc);
        }
        &:nth-child(3) {
          background-image: linear-gradient(to right, #ebbf73, #f7b43f);
        }
        &:nth-child(4) {
          background-image: linear-gradient(to right, #85ce89, #62b662);
        }
        &:nth-child(5) {
          background-image: linear-gradient(to right, #03ddb6, #06b186);
        }
      }
    }
  }
  .dataStatistics {
    font-size: 20px;
    color: #666;
  }
  .data {
    padding: 20px 0;
    font-size: 14px;
    color: #999;
  }
}
</style>